<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			padding:0;
			margin:0;
		}
		#a{
			margin:20px;
			width: 500px;
			height: 500px;
			border:5px solid black;
		}
		#b{

			width: 300px;
			height: 300px;
			background: yellow;
			border:5px solid black;
			margin:20px;
		}
		#c{
			margin:20px;
			width: 100px;
			height: 100px;
			background: red;
			border:5px solid black;
		}
	</style>
</head>
<body>
	<div>
		<div id="a">
			<div id="b">
				<div id="c"></div>
			</div>
		</div>
	</div>
	
</body>
</html>	
<script>
	var cDiv = document.getElementById("c");
	console.log(cDiv.offsetTop);

	HTMLElement.prototype.getTop = function(){
		function f(e){

			if(!e.offsetParent) return 0;
			// 获取元素到offsetParent外边框的距离
			var top = e.offsetTop + e.offsetParent.clientTop;


			return top + f(e.offsetParent);
		}
		return f(this);
	};
	console.log(cDiv.offsetTop);
</script>